<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<!--定义好页面编码 -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--描述：这里定义好移动端的自适应-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap 模板</title>
		<!-- 引入好Bootstrap css样式文件 -->
		<link href="css/bootstrap.css" rel="stylesheet">

		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
		<!--描述：引入js文件 记住一定要先引入JQuery的支持-->
		<script src="js/jquery-1.12.4.js"></script>
		<!-- 引入bootStrap的js文件-->
		<script src="js/bootstrap.js"></script>
	</head>

	<body>
		<!-- 这里写代码 
  	用户登录 
  	用户名 
  	密码 
  	选择文件(并且下面有提示) 
  	复选框 check me out 
  	登录 重置-->
		<div class="container">
			<form action="#">
				<fieldset>
					<legend><label>用户登录</label></legend>
					<div class="form-group">
						<label>用户名</label>
						<input type="text" class="form-control" />
					</div>
					<div class="form-group">
						<label>密码</label>
						<input type="password" class="form-control" />
					</div>
					<div class="form-group">
						<label>选择文件</label>
						<input type="file" aria-describedby="helpBlock" />
						<span class="help-block">请上传文件,文件大小不得大于<span class="text-warning"><em>3M</em></span></span>
					</div>
					<div class="form-group">
						<div class="checkbox">
							<!-- 记住如果要使用复选框或者单选按钮一定要用层包一层-->
							<label><input  type="checkbox">check me out</label>
						</div>
					</div>
					<div class="form-group">
						<!-- 记住按钮就不要label成对出现了-->
						<button type="button" class="btn btn-primary">登录</button>
						<button type="button" class="btn btn-warning">重置</button>
					</div>
				</fieldset>
			</form>
			<hr>
			<!-- 如果不使用样式的对比-->
			<form action="#">
				<fieldset>
					<legend><label>用户登录</label></legend>
					<div class="">
						<label>用户名</label>
						<input type="text" class="" />
					</div>
					<div class="">
						<label>密码</label>
						<input type="password" class="" />
					</div>
					<div class="form-group">
						<label>选择文件</label>
						<input type="file" aria-describedby="helpBlock" />
						<span class="help-block">请上传文件,文件大小不得大于<span class="text-warning"><em>3M</em></span></span>
					</div>
					<div class="f">
						<!--<div class="checkbox">-->
							<!-- 记住如果要使用复选框或者单选按钮一定要用层包一层-->
							<input  type="checkbox">check me out
						<!--</div>-->
					</div>
					<!--<div class="form-group">-->
						<!-- 记住按钮就不要label成对出现了-->
						<button type="button" >登录</button>
						<button type="button" >重置</button>
					<!--</div>-->
				</fieldset>
			</form>

		</div>
	</body>

</html>